<!--
 * @Author: ZHOU
 * @Date: 2021-10-27 17:30:02
 * @LastEditTime: 2021-10-28 14:29:30
 * @Description: 
 * @FilePath: \javaScript高级程序设计\code\第12章 BOM\12.5 history对象\third.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新解决方案</title>
    <style>
        div {
            padding-bottom: 100px;
        }
    </style>
</head>
<!--我们来设想这样一个应用。一个页面来显示一篇长文章，该文章内容很长，分为很多章节。我们希望页面不会一次把所有章节的内容都加载起来，而是有一个章节导航，
点击每个章节链接，通过jax加载具体章节的内容，而其它页面部分不需要要变化。-->
<body>
<div style="float:left;border:1px solid red;margin:20px" id="container">
    <p><a href="javascript:" id="section1">第1章</a></p>
    <p><a href="javascript:" id="section2">第2章</a></p>
    <p><a href="javascript:" id="section3">第3章</a></p>
</div>
<div style="float:left;border:1px solid red;margin:20px" id="content"></div>
</body>
<script>
    console.log('页面初始化');
    //添加监听
      window.onload = function(){
      let divDOM = document.getElementById('container');
      divDOM.onclick = function(e){
      if(e.target.nodeName.toLowerCase() === 'a'){
      ajax(e.target.id,false);
      }
    }
    }
    //加载默认的章节
    changeContent();
    //添加popstate事件
    window.addEventListener('popstate',function(e){
        console.log("🚀 ~ file: third.html ~ line 42 ~ window.addEventListener ~ popstate", e)
        changeContent();
    });


  
    function changeContent(){
        //判断有无查询条件
        let query = window.location.href.split('?')[1];
        console.log("🚀 ~ file: third.html ~ line 45 ~ changeContent ~ query", query)
        if(!query){
            //如果没有查询条件，默认第1章节
            history.replaceState({replaceState:'replaceState'},"",window.location.href + "?name=section1");
            //修改URL之后，重新调用changeContent，触发操作
            changeContent();
        } else {
            //用户正常点击
            ajax(query.split('=').length > 0 && query.split('=')[1],true);
        }
    }
    
    function ajax(id,isPopstate){
    console.log("🚀 ~ file: third.html ~ line 57 ~ ajax ~ isPopstate", isPopstate)      
      //获取展示内容的DOM
      let contentDOM = document.getElementById('content');
      //编辑内容
      contentDOM.innerHTML = id+'的内容';
      //编辑标题
      document.title = id;
      //判断是通过点击页面按钮，还是通过浏览器按钮返回
      if(!ISPOPSTATE){
        
        history.pushState({pushState:'pushState'},"",
        location.href.split('?')[0] + "?name="+id);
      }
    }
</script>
<script>
  /* 加载上面页面，测试下，所有的问题都解决了。下面我们来解释下上述代码。
　　  我们先看changeContent方法，该方法首先获取页面的url地址，判断该地址是否有查询条件（是否带章节信息），如果没有，认为要显示第一章节。我们利用history的replaceState方法来改变当前的url，加上 name=section1的查询条件，表示是第1章。因为replaceState方法不会改变页面内容，因此还需要接着再调用changeContent方法。如果地址带了查询条件，认为已经指定显示某个章节内容，这时触发章节链接的click事件。
　　我们再看ajax方法，就是章节链接的click事件响应函数，为了简化，该函数没有发起实际的ajax请求，而是相当于直接处理ajax返回的结果。首先是用得到的结果更新页面（这里是直接写死的），然后更新标题，这与传统的ajax做法一样。关键的区别是，判断该方法如果是用户点击的（不是onpopstate事件处理的），就会调用history对象的pushState方法来将当前页面信息保存到history对象中，并新增一个记录信息代表ajax请求后的页面。
    changeContent方法同样是onpopstate事件的处理函数，其功能就是利用获取到的url信息（保存在history记录）中，来通过ajax获取到对应的内容，让页面显示相应的信息。 从用户感知上看，就跟正常的回退、前进导致的页面切换一样。用户感觉不到是ajax请求，还以为就是多个独立的页面在切换。
  */
</script>
</html>